<template>
	<view class="return-index">
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList" @toPage="toPage"></popup-active>
		<view class="swiper-wrapper">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in imgUrlArr" :key="index" @click="swiperHandle(item)" style="border-radius: 20rpx;">
					<view class="swiper-item uni-bg-red"><image :src="item.imgUrl" mode="aspectFill" class="img" /></view>
				</swiper-item>
			</swiper>
		</view>

		<view class="main-wrapper">
			<view v-for="(item, index) in renwuArr" :key="index" @click="detailsHandle(item)" class="item">
				<view class="left"><image :src="item.imgUrl" mode="aspectFill" /></view>
				<view class="right">
					<view class="font28 fontW400 ellipsis color67655E marginB20">{{ item.contentName }}</view>
					<view class="font24 color8a8c8d ellipsis2 marginB30">{{ item.contentIntroduce }}</view>
					<view class="care" @click.stop="careHeHuoRen(item)">
						<image :src="`//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/heart_${item.likeType === 1 ? 'fill' : 'empty'}.png`" alt="" />
						<text class="font24 color8a8c8d fr paddingR16">{{ item.giveLikeNum }}</text>
					</view>
				</view>
			</view>
		</view>
		<mix-load-more :status="loading"></mix-load-more>
	</view>
</template>

<script>
import http from '../../common/request.js';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import popupActive from '@/components/popup-activity/popup-activity.vue';
import { getCommonShareInfo } from '@/common/utils.js';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	data() {
		return {
			pageNum: 1,
			pageSize: 10,
			renwuArr: [],
			loading: 0,
			background: ['color1', 'color2', 'color3'],
			indicatorDots: false,
			autoplay: true,
			interval: 5000,
			duration: 500,
			imgUrlArr: [],
			popScreenList: [],
			showHonor: false,
			oldData: {}
		};
	},
	mounted() {
		this.getMoreNews();
		this.swiperData();
	},
	components: {
		mixLoadMore,
		popupActive
	},
	onReachBottom: function() {
		//当划到最底部的时候触发事件
		if (this.loading != 2) {
			this.getMoreNews(); //到底之后会触发getMoreNews()函数;
		}
	},
	methods: {
		toPage(value) {
			http('/api/duiba/getNoLoginUrl?credits=0&redirect=' + value, { method: 'GET' }).then(result => {
				if (result.code == 200) {
					// #ifdef H5
					location.href = result.data;
					// #endif
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '../../home/web_view?url=' + encodeURIComponent(result.data),
						animationType: 'pop-in',
						animationDuration: 200
					});
					//#endif
				}
			});
		},
		getMoreNews() {
			//数据到底,触发这个函数
			this.loading = 1;
			// uni.showNavigationBarLoading(); //一读取数据,就进行刷新
			http('/api/sysRecruitPartner/getSysContentInfo', {
				method: 'get',
				data: {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					contentSubject: 1
				}
			}).then(result => {
				var pages = result.data;
				this.renwuArr = this.renwuArr.concat(pages); //进行数据的累加
				if (result.data.length == this.pageSize) {
					this.pageNum++; //页数的++
					this.loading = 0;
				} else {
					this.loading = 2;
				}
				this.loading = this.renwuArr.length === 0 ? 3 : this.loading;
			});
		},
		swiperData() {
			http('/api/sysRecruitPartner/getSysRecruitPartnerByParticipantsRange', {
				method: 'GET'
			}).then(result => {
				if (result.code == 200) {
					this.imgUrlArr = result.data;
				} else {
				}
			});
		},
		// 跳转列表详情
		detailsHandle(item) {
			this.oldData = item;
			const { contentId, likeType, giveLikeNum } = item;
			let url = `./details?contentId=${contentId}&likeType=${likeType}&giveLikeNum=${giveLikeNum}`;
			if (item.originalFlag === 0) {
				url = '../web_view?url=' + encodeURIComponent(item.contentUrl);
				// #ifdef H5
				location.href = item.contentUrl;
				return;
				// #endif
			}
			uni.navigateTo({
				url,
				animationType: 'pop-in',
				animationDuration: 200,
				events: {
					updateList: ({ count, type }) => {
						if (this.oldData) {
							this.oldData.giveLikeNum = count;
							this.oldData.likeType = type;
						}
					}
				}
			});
		},
		//轮播图跳转
		swiperHandle(item) {
		
			uni.navigateTo({
				url: '/home/returnHome/swiperDetails?recruitPartnerId=' + item.recruitPartnerId,
				animationType: 'pop-in',
				animationDuration: 200
			});
			
		},
		careHeHuoRen(item) {
			let url = 'api/sysContentLike/dataIncr';
			if (item.likeType === 1) {
				url = 'api/sysContentLike/dataDecr';
			}
			http(url, {
				method: 'POST',
				data: {
					contentId: item.contentId
				}
			}).then(result => {
				if (result.code == 200) {
					item.giveLikeNum = result.data.count || 0;
					item.likeType = result.data.likeType;
					if (result.data.likeType === 1) {
						if (result.data.popScreen.length > 0) {
							this.showHonor = true;
							this.popScreenList = result.data.popScreen;
						}
					}
				}
			});
		},
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots;
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay;
		},
		intervalChange(e) {
			this.interval = e.target.value;
		},
		durationChange(e) {
			this.duration = e.target.value;
		}
	}
};
</script>

<style lang="less" scoped>
.return-index {
	height: 100%;
	background-color: #f7f7f7;
	.swiper-wrapper {
		padding: 25rpx 40rpx 36rpx 40rpx;
		background-color: #fff;
		.swiper {
			border-radius: 20rpx;
			overflow: hidden;
			height: 290rpx;
			.swiper-item {
				width: 670rpx;
				height: 290rpx;
				margin: 0 auto;
				border-radius: 20rpx;
				overflow: hidden;
				.img {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		}
	}

	.main-wrapper {
		display: flex;
		flex-direction: column;
		background: #f7f7f7;
		justify-content: center;
		padding: 25rpx 40rpx;

		.item {
			height: 210rpx;
			display: flex;
			border-radius: 12rpx;
			overflow: hidden;
			background-color: #fff;
			margin-bottom: 25rpx;
			&:last-child {
				margin: 0;
			}

			.left {
				width: 239rpx;
				height: 210rpx;
				border-radius: 12rpx 0 0 12rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				padding: 24rpx 20rpx;
				background-color: #fff;
				width: calc(100% - 239rpx);
				height: 210rpx;
				position: relative;
				.marginB20 {
					line-height: 42rpx;
					margin-bottom: 12rpx;
				}
				.marginB30 {
					line-height: 37rpx;
				}
				.care {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					position: absolute;
					bottom: 0;
					right: 20rpx;
					padding: 20rpx 0 26rpx 20rpx;
					width: 90rpx;
					image {
						width: 28rpx;
						height: 26rpx;
						margin-right: 12rpx;
					}
				}
			}
		}
	}

	.uni-swiper-dots-horizontal,
	.uni-swiper-dots {
		display: none;
	}
}
</style>
